<template>
  <v-app>
    <v-main
      class="d-flex align-center justify-center"
      style="min-height: 100vh; background-color: #f5f5f5"
    >
      <v-container>
        <v-row justify="center">
          <v-col cols="12" sm="8" md="6" lg="4">
            <v-card class="elevation-12 pa-6">
              <v-card-title class="text-h5 text-center mb-4">
                <v-icon icon="mdi-account-circle" size="30" class="mr-2"></v-icon>
                用户登录
              </v-card-title>
              <v-card-text>
                <v-form ref="form" @submit.prevent="login">
                  <v-text-field
                    v-model="username"
                    label="用户名"
                    prepend-inner-icon="mdi-account"
                    variant="outlined"
                    density="comfortable"
                    :rules="[rules.required]"
                    class="mb-4"
                  ></v-text-field>

                  <v-text-field
                    v-model="password"
                    label="密码"
                    prepend-inner-icon="mdi-lock"
                    :append-inner-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
                    :type="showPassword ? 'text' : 'password'"
                    variant="outlined"
                    density="comfortable"
                    @click:append-inner="showPassword = !showPassword"
                    :rules="[rules.required]"
                    class="mb-4"
                  ></v-text-field>

                  <v-btn
                    color="primary"
                    block
                    size="large"
                    type="submit"
                    :loading="loading"
                    class="mt-4"
                  >
                    登录
                  </v-btn>
                </v-form>
              </v-card-text>
              <v-card-actions class="justify-center mt-4">
                <v-btn variant="text" color="primary" @click="forgotPassword">忘记密码？</v-btn>
                <v-btn variant="text" color="secondary" @click="register">注册新用户</v-btn>
              </v-card-actions>
            </v-card>
          </v-col>
        </v-row>
      </v-container>
    </v-main>
  </v-app>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router"; // 假设你使用 Vue Router

const username = ref("");
const password = ref("");
const showPassword = ref(false);
const loading = ref(false);
const form = ref(null); // 用于表单校验

const router = useRouter();

const rules = {
  required: (value) => !!value || "此项为必填项",
};

const login = async () => {
  const { valid } = await form.value.validate();

  if (valid) {
    loading.value = true;
    // 模拟异步登录请求
    setTimeout(() => {
      loading.value = false;
      if (username.value === "admin" && password.value === "123456") {
        alert("登录成功！");
        // router.push('/dashboard'); // 登录成功后跳转到主页
      } else {
        alert("用户名或密码错误！");
      }
    }, 1500);
  }
};

const forgotPassword = () => {
  alert("跳转到忘记密码页面...");
  // router.push('/forgot-password');
};

const register = () => {
  alert("跳转到注册页面...");
  // router.push('/register');
};
</script>

<style scoped>
/* 可以添加一些自定义样式，但Vuetify通常通过props和class就能很好地控制 */
</style>
